<template>
  <div class="product-index">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) of bannerImg" :key="index">
        <img :src="item" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息 -->
    <div class="product-info">
      <!-- 描述 -->
      <div class="desc">{{productInfo.proName}}</div>
      <!-- 价格 -->
      <div class="price">价格：
        <span>￥{{productInfo.price}}</span>
        <s>￥{{productInfo.oldPrice}}</s>
      </div>
      <!-- 尺码 -->
      <div class="inch">尺寸：{{productInfo.size}}
        <van-radio-group v-model="radio">
          <van-radio
            v-for="i of productInfo.section"
            :key="i+productInfo.min"
            :value="i+productInfo.min"
            :name="i+productInfo.min"
          >{{i+productInfo.min}}</van-radio>
        </van-radio-group>
      </div>
      <!-- 剩余 -->
      <div class="left">数量：剩余{{productInfo.num}}</div>
    </div>
    <!-- 商品导航底栏 -->
    <div class="product-action">
      <van-goods-action>
        <van-goods-action-mini-btn
          icon="chat-o"
          text="客服"
          @click="$toast.fail('客服不在')"
        />
        <van-goods-action-mini-btn
          icon="cart-o"
          text="购物车"
          @click="$router.push({name: 'cart'})"
        />
        <van-goods-action-big-btn
          text="加入购物车"
          @click="handleAddCart"
        />
        <van-goods-action-big-btn
          primary
          text="立即购买"
          @click="handleBuy"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mobile } from '@/api'
export default {
  name: 'ProductIndex',
  data () {
    return {
      bannerImg: [
        require('../../../assets/images/banner1.png'),
        require('../../../assets/images/banner2.png'),
        require('../../../assets/images/banner3.png'),
        require('../../../assets/images/banner4.png'),
        require('../../../assets/images/banner5.png'),
        require('../../../assets/images/banner6.png'),
        require('../../../assets/images/banner7.png'),
        require('../../../assets/images/banner8.jpg'),
        require('../../../assets/images/banner9.png')
      ],
      productInfo: {},
      radio: []
    }
  },
  mounted () {
    this.initPage()
  },
  methods: {
    initPage () {
      let obj = { id: this.$route.params.id }
      mobile.getProductInfo(obj).then(res => {
        console.log(res)
        this.productInfo = res.data
        let arr = res.data.size.split('-')
        let min = parseInt(arr[0])
        let max = parseInt(arr[1])
        let section = max - min
        this.productInfo.min = min
        this.productInfo.max = max
        this.productInfo.section = section
      }).catch(err => {
        console.log(err)
      })
    },
    // 加入购物车
    handleAddCart () {
      console.log(this.radio)
      let obj = {
        productId: this.productInfo.id,
        num: 1,
        size: this.radio
      }
      mobile.addCart(obj).then(res => {
        console.log(res)
        if (res.data.success) {
          this.$dialog.alert({
            message: '商品添加成功，是否前往购物车',
            showCancelButton: true
          }).then(() => {
            this.$router.push({ name: 'cart' })
          }).catch(() => {
            this.$toast.success('继续买买买')
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 立即购买
    handleBuy () {}
  }
}
</script>

<style lang="scss" scoped>
.product-index {
  // 轮播图
  .van-swipe {
    height: 235px;
    .van-swipe-item {
      height: 100%;
      img {
        width: 100%;
      }
    }
  }
  // 信息
  .product-info {
    margin-top: 10px;
    padding: 0 10px;
    color: #666;
    font-size: 14px;
    .desc {
      font-size: 16px;
      color: #333;
      margin: 10px 0;
    }
    .price {
      padding: 10px 0;
      span {
        color: red;
        font-size: 20px;
        margin: 0 10px 0 0;
      }
    }
    .inch {
      margin-top: 10px;
      .van-radio-group {
        .van-radio {
          display: inline-block;
          padding: 5px 10px;
          background-color: #f8f8f8;
        }
      }
    }
    .left {
      margin-top: 10px;
    }
  }
  // 底部导航栏
  .product-action {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
  }
}
</style>
